<template>
	<div>
		<Card :bordered="false" class="job_con_card" >
			 <Tabs value="name1">
		        <TabPane label="发布中" name="name1">
		        	<div class="tab_one_contain">
		        		<Checkbox v-model="checkall">全选</Checkbox>
		        		<i-button type="primary" class="job_new_add" @click="AddPositionClick">新增职位</i-button>
		        		<div class="select_top" style="margin-right: 10px;">
		        			<Select v-model="time" placeholder="刷新日期排序">
				        		<Option v-for="item in TimeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    		</Select>
		        		</div>
				    	<Checkbox v-model="myrelease">我发布的职位</Checkbox>
				    	<div class="pos_t pos_t_two">
					    	<span class="pos_t_one_buy">查看最新简历</span>
		               	    &nbsp; &nbsp;
		               	    <span class="pos_t_one_say">刷新日志</span>
	               	    </div>
		        	</div>
		        	<div class="manli" v-for="(item, index) in manList">
		        		<div  class="manli_one">
		        			<Checkbox v-model="checkall" class="manli_checkall">&nbsp;{{item.pos}}</Checkbox><span>[{{item.city}}]</span>
		        		</div>
		        		<div class="manli_two">
		        			<span>{{item.company}}</span> | <span>{{item.adress}}</span>
		        		</div>
		        		<div class="manli_three">
		        			<span>发布日期：{{item.release}}</span>
		        			<span>刷新日期：{{item.refresh}}</span>
		        			<span>结束日期：{{item.endtime}}</span>
		        			<span class="manli_span_three">已筛选</span>
		        			<span class="manli_span_two">暂停&nbsp; &nbsp;|&nbsp;&nbsp;</span>
		        			<span class="manli_span_one">查看简历&nbsp;&nbsp;|&nbsp;&nbsp;</span>
		        		</div>
		        		<div class="manli_button">
		        			<Button type="warning" @click="PlacementClick(item.id)">置顶</Button>
		        			<Button type="primary" @click="BiddingClick(item.id)">竞价</Button>
		        			<Button type="error"   @click="RereleaseClick(item.id)">再发布</Button>
		        			<Button type="success" @click="RefreshClick(item.id)">刷新</Button>
		        		</div>
		        	</div>
		        	<div style="margin-top: 25px;">
		        		<Checkbox v-model="checkall" class="manli_checkall">全选</Checkbox>
		        		<Button type="error" @click="PlacementClick()">批量刷新</Button>
	        			<Button type="error" @click="BiddingClick()">批量发布</Button>
	        			<Button type="error"   @click="RereleaseClick()">批量暂停</Button>
	        			<Button type="error" @click="RefreshClick()">复制职位</Button>
	        			<Button type="error" @click="RemoveClick()">删除刷选</Button>
	        			<Button type="error" @click="AddClick()">添加刷选</Button>
		        	</div>
		        	<div class="manli_foot"><Page :total="100" show-sizer /></div>
		        </TabPane>
		        <TabPane label="未发布" name="name2">
		        	<div class="tab_one_contain">
		        		<Checkbox v-model="checkall">全选</Checkbox>
		        		<i-button type="primary" class="job_new_add" @click="AddPositionClick">新增职位</i-button>
		        		<div class="select_top" style="margin-right: 10px;">
		        			<Select v-model="time" placeholder="刷新日期排序">
				        		<Option v-for="item in TimeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    		</Select>
		        		</div>
				    	<div class="pos_t pos_t_two">
					    	<span class="pos_t_one_buy">查看最新简历</span>
		               	    &nbsp; &nbsp;
		               	    <span class="pos_t_one_say">刷新日志</span>
	               	    </div>
		        	</div>
		        	<div class="manli" v-for="(item, index) in manList">
		        		<div  class="manli_one">
		        			<Checkbox v-model="checkall" class="manli_checkall">&nbsp;{{item.pos}}</Checkbox><span>[{{item.city}}]</span>
		        		</div>
		        		<div class="manli_two">
		        			<span>{{item.company}}</span> | <span>{{item.adress}}</span>
		        		</div>
		        		<div class="manli_three">
		        			<span>发布日期：{{item.release}}</span>
		        			<span>刷新日期：{{item.refresh}}</span>
		        			<span>结束日期：{{item.endtime}}</span>
		        			<span class="manli_span_three">已筛选</span>
		        			<span class="manli_span_two">暂停&nbsp; &nbsp;|&nbsp;&nbsp;</span>
		        			<span class="manli_span_one">查看简历&nbsp;&nbsp;|&nbsp;&nbsp;</span>
		        		</div>
		        		<div class="manli_button">
		        			<Button type="warning" @click="PlacementClick(item.id)">置顶</Button>
		        			<Button type="primary" @click="BiddingClick(item.id)">竞价</Button>
		        			<Button type="error"   @click="RereleaseClick(item.id)">再发布</Button>
		        			<Button type="success" @click="RefreshClick(item.id)">刷新</Button>
		        		</div>
		        	</div>
		        	<div style="margin-top: 25px;">
		        		<Checkbox v-model="checkall" class="manli_checkall">全选</Checkbox>
		        		<Button type="error" @click="PlacementClick()">批量刷新</Button>
	        			<Button type="error" @click="BiddingClick()">批量发布</Button>
	        			<Button type="error"   @click="RereleaseClick()">批量暂停</Button>
	        			<Button type="error" @click="RefreshClick()">复制职位</Button>
	        			<Button type="error" @click="RemoveClick()">删除刷选</Button>
	        			<Button type="error" @click="AddClick()">添加刷选</Button>
		        	</div>
		        	<div class="manli_foot"><Page :total="100" show-sizer /></div>
		        </TabPane>
		        <TabPane label="暂停" name="name3">
		        	<div class="tab_one_contain">
		        		<Checkbox v-model="checkall">全选</Checkbox>
		        		<i-button type="primary" class="job_new_add" @click="AddPositionClick">新增职位</i-button>
		        		<div class="select_top" style="margin-right: 10px;">
		        			<Select v-model="time" placeholder="刷新日期排序">
				        		<Option v-for="item in TimeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    		</Select>
		        		</div>
				    	<Checkbox v-model="myrelease">我发布的职位</Checkbox>
				    	<div class="pos_t pos_t_two">
					    	<span class="pos_t_one_buy">查看最新简历</span>
		               	    &nbsp; &nbsp;
		               	    <span class="pos_t_one_say">刷新日志</span>
	               	    </div>
		        	</div>
		        	<div class="manli" v-for="(item, index) in manList">
		        		<div  class="manli_one">
		        			<Checkbox v-model="checkall" class="manli_checkall">&nbsp;{{item.pos}}</Checkbox><span>[{{item.city}}]</span>
		        		</div>
		        		<div class="manli_two">
		        			<span>{{item.company}}</span> | <span>{{item.adress}}</span>
		        		</div>
		        		<div class="manli_three">
		        			<span>发布日期：{{item.release}}</span>
		        			<span>刷新日期：{{item.refresh}}</span>
		        			<span>结束日期：{{item.endtime}}</span>
		        			<span class="manli_span_three">已筛选</span>
		        			<span class="manli_span_two">暂停&nbsp; &nbsp;|&nbsp;&nbsp;</span>
		        			<span class="manli_span_one">查看简历&nbsp;&nbsp;|&nbsp;&nbsp;</span>
		        		</div>
		        		<div class="manli_button">
		        			<Button type="warning" @click="PlacementClick(item.id)">置顶</Button>
		        			<Button type="primary" @click="BiddingClick(item.id)">竞价</Button>
		        			<Button type="error"   @click="RereleaseClick(item.id)">再发布</Button>
		        			<Button type="success" @click="RefreshClick(item.id)">刷新</Button>
		        		</div>
		        	</div>
		        	<div style="margin-top: 25px;">
		        		<Checkbox v-model="checkall" class="manli_checkall">全选</Checkbox>
		        		<Button type="error" @click="PlacementClick()">批量刷新</Button>
	        			<Button type="error" @click="BiddingClick()">批量发布</Button>
	        			<Button type="error"   @click="RereleaseClick()">批量暂停</Button>
	        			<Button type="error" @click="RefreshClick()">复制职位</Button>
	        			<Button type="error" @click="RemoveClick()">删除刷选</Button>
	        			<Button type="error" @click="AddClick()">添加刷选</Button>
		        	</div>
		        	<div class="manli_foot"><Page :total="100" show-sizer /></div>
		        </TabPane>
		        <TabPane label="所有职位" name="name4">
		        	<div class="tab_one_contain">
		        		<Checkbox v-model="checkall">全选</Checkbox>
		        		<i-button type="primary" class="job_new_add" @click="AddPositionClick">新增职位</i-button>
		        		<div class="select_top" style="margin-right: 10px;">
		        			<Select v-model="time" placeholder="刷新日期排序">
				        		<Option v-for="item in TimeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    		</Select>
		        		</div>
				    	<Checkbox v-model="myrelease">我发布的职位</Checkbox>
				    	<div class="pos_t pos_t_two">
					    	<span class="pos_t_one_buy">查看最新简历</span>
		               	    &nbsp; &nbsp;
		               	    <span class="pos_t_one_say">刷新日志</span>
	               	    </div>
		        	</div>
		        	<div class="manli" v-for="(item, index) in manList">
		        		<div  class="manli_one">
		        			<Checkbox v-model="checkall" class="manli_checkall">&nbsp;{{item.pos}}</Checkbox><span>[{{item.city}}]</span>
		        		</div>
		        		<div class="manli_two">
		        			<span>{{item.company}}</span> | <span>{{item.adress}}</span>
		        		</div>
		        		<div class="manli_three">
		        			<span>发布日期：{{item.release}}</span>
		        			<span>刷新日期：{{item.refresh}}</span>
		        			<span>结束日期：{{item.endtime}}</span>
		        			<span class="manli_span_three">已筛选</span>
		        			<span class="manli_span_two">暂停&nbsp; &nbsp;|&nbsp;&nbsp;</span>
		        			<span class="manli_span_one">查看简历&nbsp;&nbsp;|&nbsp;&nbsp;</span>
		        		</div>
		        		<div class="manli_button">
		        			<Button type="warning" @click="PlacementClick(item.id)">置顶</Button>
		        			<Button type="primary" @click="BiddingClick(item.id)">竞价</Button>
		        			<Button type="error"   @click="RereleaseClick(item.id)">再发布</Button>
		        			<Button type="success" @click="RefreshClick(item.id)">刷新</Button>
		        		</div>
		        	</div>
		        	<div style="margin-top: 25px;">
		        		<Checkbox v-model="checkall" class="manli_checkall">全选</Checkbox>
		        		<Button type="error" @click="PlacementClick()">批量刷新</Button>
	        			<Button type="error" @click="BiddingClick()">批量发布</Button>
	        			<Button type="error"   @click="RereleaseClick()">批量暂停</Button>
	        			<Button type="error" @click="RefreshClick()">复制职位</Button>
	        			<Button type="error" @click="RemoveClick()">删除刷选</Button>
	        			<Button type="error" @click="AddClick()">添加刷选</Button>
		        	</div>
		        	<div class="manli_foot"><Page :total="100" show-sizer /></div>
		        </TabPane>
		    </Tabs>
	    </Card>	
	    <BackTop></BackTop>
	</div>
</template>
<script>
	export default {
    	name: 'Contain',
		data () {
            return {
            	checkall:"",
            	time:"",
            	myrelease:"",
            	TimeList:[
            		{
                        value: '发布日期',
                        label: '发布日期'
                    },
                    {
                        value: '刷新日期',
                        label: '刷新日期'
                    },
                    {
                        value: '结束日期',
                        label: '结束日期'
                    },
                    {
                        value: '发布城市',
                        label: '发布城市'
                    },
                    {
                        value: '工作地点',
                        label: '工作地点'
                    },
                    {
                        value: '职位名称',
                        label: '职位名称'
                    }
            	],
            	manList:[ 
            	    {"id":1,"pos": '前端工程师',"city": '上海',"company":"上海永固","adress":"上海-奉贤","release":"2019-06-28","refresh":"2019-03-28","endtime":"2019-12-12"},
                    {"id":2,"pos": '前端工程师',"city": '上海',"company":"上海永固","adress":"上海-奉贤","release":"2019-06-28","refresh":"2019-03-28","endtime":"2019-12-12"},
                    {"id":3,"pos": '前端工程师',"city": '上海',"company":"上海永固","adress":"上海-奉贤","release":"2019-06-28","refresh":"2019-03-28","endtime":"2019-12-12"},
                    {"id":4,"pos": '前端工程师',"city": '上海',"company":"上海永固","adress":"上海-奉贤","release":"2019-06-28","refresh":"2019-03-28","endtime":"2019-12-12"},
                    {"id":5,"pos": '前端工程师',"city": '上海',"company":"上海永固","adress":"上海-奉贤","release":"2019-06-28","refresh":"2019-03-28","endtime":"2019-12-12"},
                    {"id":6,"pos": '前端工程师',"city": '上海',"company":"上海永固","adress":"上海-奉贤","release":"2019-06-28","refresh":"2019-03-28","endtime":"2019-12-12"},
                    {"id":7,"pos": '前端工程师',"city": '上海',"company":"上海永固","adress":"上海-奉贤","release":"2019-06-28","refresh":"2019-03-28","endtime":"2019-12-12"}
            	]
            }
        },
        methods:{
        	AddPositionClick(){
        		this.$router.push("/position")
        	},
        	PlacementClick(e){
        		alert(e)
        	},
        	BiddingClick(){
        		
        	},
        	RereleaseClick(){
        		
        	},
        	RefreshClick(){
        		
        	},
        	RemoveClick(){
        		
        	},
        	AddClick(){
        		
        	}
        }
	}	
</script>

<style>
	.job_con_card{
		margin-top: 15px;
	}
	.pos_t_one_say:hover{
		text-decoration: underline;
		cursor: pointer;
	}
	.pos_t_one_buy,.pos_t_one_say{
		color: #2DB7F5;
	}
	.pos_t_one_buy:hover{
		text-decoration: underline;
		cursor: pointer;
	}
	.select_top{
		width: 200PX;
		display: inline-block;
	}
	.pos_t_two{
		position: absolute;
		right: 18px;
    	top: -50px;
	}
	.tab_one_contain{
		background: #F3F3F3;
	}
	
	.manli{
		border: 2px solid #EAEAEA;
		height: 90px;
		position: relative;
		margin-top: 15px;
	}
	.manli_checkall{
		font-weight: 700;
		color: #2DB7F5;
		font-size: 15px;
		margin-right: 10px;
	}
	.manli_one{
		height: 29px;
   		line-height: 29px;
   		position: relative;
   		padding-left: 15px;
   		margin-top: 5px;
	}
	.manli_two{
		height: 29px;
   		line-height: 29px;
   		position: relative;
   		padding-left: 35px;
   		font-weight: 700;
   		margin-top: -5px;
	}
	.manli_three{
		background: #F3F3F3;
		height: 29px;
   		line-height: 29px;
   		position: relative;
   		padding-left: 35px;
   		padding-right: 15px;
	}
	.manli_button{
		position: absolute;
		right: 10px;
		top: 15px;
	}
	.manli_span_one,.manli_span_two,.manli_span_three{
	    float: right;
	    /*color: #2DB7F5;*/
	}
	.manli_span_one:hover,.manli_span_two:hover,.manli_span_three:hover{
	   /* text-decoration: underline;*/
	    cursor: pointer;
	    color: #2DB7F5;
	}
	.manli_foot{
		display: block;
		text-align: center;
		margin-top: 25px;
		margin-bottom: 300px;
	}
	.job_new_add{
		width: 80px;
		margin-left: 10px;
		margin-right: 10px;
	}
</style>